<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flask upload with Dropzone example</title>
    <link rel="stylesheet" href="./dist/dropzone.css" type="text/css" />
    <script src="./dist/jquery-3.4.1.min.js"></script>
    <script src="./dist/dropzone.js"></script>
</head>

<body>

方法0：
<div id="dropz" class="dropzone"></div>

<script>
    $("#dropz").dropzone({
        url: "handle-upload.php",
        maxFiles: 10,
        maxFilesize: 512,
        acceptedFiles: ".jpg,.jpeg,.png"
    });
</script>

方法1：
<form id ="myAwesomeDropzone" action="{{ request.path }}"
      class="dropzone" method="POST" enctype="multipart/form-data"></form>

<h1 id="try-it-out">Try it out!</h1>

  <div id="dropzone">
      <form action="/upload" class="dropzone needsclick" id="demo-upload">
          <div class="dz-message needsclick">
              <button type="button" class="dz-button">Drop files here or click to upload.</button><br />
              <span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
          </div>
      </form>
  </div>


//这段代码是展示dropzone.js的精髓,class一定要是dropzone，id可以自定义
<script type="text/javascript">
        //第二种配置，这种使用的是div做上传区域时使用的配置
        Dropzone.autoDiscover = true;//不知道该行有什么用，欢迎高手下方评论解答
        $("#demo-upload").dropzone({
        url: "{{ request.path }}",
        addRemoveLinks: true,
        method: 'post',
        filesizeBase: 1024
        });
</script>



方法2：
<div class="form-group">
    <label class="title">真人照(最多只能传一张)</label>
    <div id="dropz" class="dropzone"></div>//这段代码是展示dropzone.js的精髓,class一定要是dropzone，id可以自定义
</div>
<input type="hidden" name="file_id" ng-model="file_id" id="file_id"/>

<script type="text/javascript">
var appElement = document.querySelector('div .inmodal');
    var myDropzone = new Dropzone("#dropz", {
        url: "{{ request.path }}",//文件提交地址
        method:"post",  //也可用put
        paramName:"file", //默认为file
        maxFiles:1,//一次性上传的文件数量上限
        maxFilesize: 2, //文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
        addRemoveLinks:true,
        parallelUploads: 1,//一次上传的文件数量
        //previewsContainer:"#preview",//上传图片的预览窗口
        dictDefaultMessage:'拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "您最多只能上传1个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
        dictFallbackMessage:"浏览器不受支持",
        dictFileTooBig:"文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        //对一些方法的后续处理
        init:function(){
            this.on("addedfile", function(file) {
                //上传文件时触发的事件
                document.querySelector('div .dz-default').style.display = 'none';
            });
            this.on("success",function(file,data){
                alert(data.data)
                //上传成功触发的事件
                console.log('ok');
            });
            this.on("error",function (file,data) {
                //上传失败触发的事件
                console.log('fail');
                var message = '';
                //lavarel框架有一个表单验证，
                //对于ajax请求，JSON 响应会发送一个 422 HTTP 状态码，
                //对应file.accepted的值是false，在这里捕捉表单验证的错误提示
                if (file.accepted){
                    $.each(data,function (key,val) {
                        message = message + val[0] + ';';
                    })
                    //控制器层面的错误提示，file.accepted = true的时候；
                    alert(message);
                }
            });
            this.on("removedfile",function(file){
                //删除文件时触发的方法(向后台发送删除文件请求)
{#               $.post('/admin/del/'+ file_id,{'_method':'DELETE'},function (data) {#}
{#                    console.log('删除结果:'+data.message);#}
{#                })#}

                document.querySelector('div .dz-default').style.display = 'block';
            });
        }
    });
</script>
</body>
</html>
